<template>
 <div>
   会员账号:<input type="text" v-model="MerName" placeholder="请输入会员账号" >
   性别:<select v-model="MerSex">
    <option :value="0">--请选择--</option>
    <option :value="1">女</option>
    <option :value="2">男</option>
   </select>
   <input type="button" value="查询" class="btn btn-success" @click="GetSql">
 </div>
    <table class="table table-bordered">
      <thead>
          <tr>
          <td>
            <input type="checkbox">
          </td>
            <td>会员编号</td>
            <td>会员账号</td>
            <td>真实姓名</td>
            <td>联系发式</td>
            <td>出生日期</td>
            <td>性别</td>
            <td>会员状态</td>
            <td>积分</td>
            <td>充值金额</td>
            <td>会员类型</td>
            <td>操作</td>
        </tr>
      </thead>
        <tbody v-for="item in info ">
             <tr>
            <td>
            <input type="checkbox">
          </td>
            <td>{{ item.m_Id }}</td>
            <td>{{ item.mL_Name }}</td>
            <td>{{ item.mL_UserName }}</td>
            <td>{{ item.mL_Phone }}</td>
            <td>{{ item.mL_Mtime.substring(0,10) }}</td>
            <td>{{ item.mL_Sex?"男":"女" }}</td>
            <td>{{ item.mL_State?"正常":"禁用" }}</td>
            <td>{{ item.mL_Integral }}</td>
            <td>{{ item.mL_Money }}</td>
            <td>{{ item.mT_Name }}</td>
            <td>
              <a href="#" @click="DeleteInfo(item.m_Id)" style="margin-right: 20px;">删除</a>
              <a href="#" @click="UpInfo(item.m_Id)" style="margin-right: 20px;">修改</a>
              <a href="#" @click="UpdateInfo(item.m_Id)">修改1</a>
            </td>
        </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import axios from 'axios'



// useRouter 跳转路由参数    useRoute：操作路由参数
import { useRouter } from 'vue-router'
// 创建路由实例
const router = useRouter();


// 创建响应式数据
const info = ref([{
  m_Id:0,
  mL_Name: "",
  mL_UserName: "",
  mL_Phone: "",
  mL_IdCard: "",
  mL_Mtime: "",
  mL_Sex: "",
  mL_State: "",
  mL_Integral: "",
  mL_Money: 0,
  mT_Name:"",
}]);


// 创建响应式数据用于查询
const MerName = ref("");
const MerSex=ref(0)

// 查询方法
const GetSql = () => {
  axios.get('https://localhost:7071/api/Member/ShowMemberInfo', {
    params: {
      Mname: MerName.value,
      Msex: MerSex.value
    }
  })
    .then((res) => {
      info.value = res.data;
    })
    .catch((error) => {
    console.log(error);
  })
}

// 生命周期钩子

onMounted(() => {
    ShowMember();
})
const ShowMember = () => {
    axios.get('https://localhost:7071/api/Member/ShowMemberInfo')
        .then(res => {
            info.value = res.data;
    })
}

// 删除
const DeleteInfo = (M_id: number) => {
  
  if (confirm('确认删除吗?')) {
    axios.delete('https://localhost:7071/api/Member/DeleteMemberInfo', {
      params: {
        Mid:M_id
      }
    })
      .then(res => {
        if (res.data > 0) {
        alert("删除成功")
        }
        else {
      alert("删除失败")
    }
    })
  }
}

// 反填 跳转到修改页面 
const UpInfo = (Mid: number) => {
  // router.push('/upmember'); 跳到指定页面
  // alert(Mid)
  // console.log(info.value)
  router.push({
    name: 'upmember',
    params: {
      id:Mid
    }
    
  })
 
}


// 跳转到修改页面
const UpdateInfo = (M_id: any) => {
  router.push({
    name: 'EditMember',
    params: {
      id:M_id
    }
  });
}
</script>

<style scoped>

</style>